<template>
  <div>
    <el-dialog
      :title="form.id?'编辑部门':'添加部门'"
      :visible="showDialog"
      width="30%"
      @close="closeDialog"
    >
      <el-form ref="deptForm" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="部门名称" prop="name">
          <el-input
            v-model="form.name"
            style="width: 100%"
            placeholder="1-50个字符"
          />
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input
            v-model="form.code"
            style="width: 100%"
            placeholder="1-50个字符"
          />
        </el-form-item>
        <el-form-item label="部门负责人" prop="manager">
          <el-select
            v-model="form.manager"
            style="width: 100%"
            placeholder="请选择"
          >
            <el-option v-for="item in manegerList" :key="item.id" :label="item.username" :value="item.username"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input
            v-model="form.introduce"
            style="width: 100%"
            placeholder="1-300个字符"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" size="small" @click="addDept()">{{ form.id?'确认修改':'确认添加' }}</el-button>
        <el-button size="small" @click="resetForm()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getEmployeesSimpleAPI } from '@/api/employees.js'
import { addDepartmentAPI, editDepartmentAPI, modifyDepartmentAPI } from '@/api/department.js'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    // 从父组件获取到的点击的那一项里面的数据
    currenData: {
      type: Object,
      default: () => ({})
    },
    // 从父组件获取到的没经过处理的组织结构
    treeList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    // 思路
    // 1.新增部门 编码全局唯一 意思是code是唯一的  不能重复
    // 2.编辑部门 当前编辑部门已经有code  排除自身
    // 3.区分 复用组件=> 新增/编辑 通过code来区分
    const validateCode = (rule, value, calback) => {
      let flag
      console.log(this.currenData)
      if (this.form.id) {
        flag = this.treeList.some(item => {
          // 没有return就不起效果
          return item.code === value && value !== this.currenData.code
        })
      } else {
        flag = this.treeList.some(item => item.code === value)
      }
      if (flag) {
        calback(new Error('部门编码重复'))
      } else {
        calback(console.log(1))
      }
    }

    return {
      form: {
        name: '', // 部门名字
        introduce: '', // 部门介绍
        manager: '', // 负责人名称
        code: '' // 部门编码，同级部门不可重复
      },
      rules: {
        name: [{ required: true, message: '请输入部门名称', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '最多输入50个字符', trigger: ['blur', 'change'] }],

        introduce: [{ required: true, message: '请输入部门介绍', trigger: ['blur', 'change'] },
          { min: 1, max: 300, message: '最多输入50个字符', trigger: ['blur', 'change'] }],

        manager: [{ required: true, message: '请输入负责人', trigger: ['blur', 'change'] }],

        code: [{ required: true, message: '请输入部门编码', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '最多输入50个字符', trigger: ['blur', 'change'] },
          { validator: validateCode, trigger: ['blur', 'change'] }]

      },
      manegerList: []// 员工简单信息列表
    }
  },
  created () {
    this.getEmployeesSimple()
  },

  methods: {
    // 因为涉及到组件的值传递 .sync修饰符会报错 所以需要子组件通知父组件进行弹出层的关闭
    closeDialog () {
      this.$emit('close-dialog', false)
      // 关闭后重置表单的内容
      this.$refs.deptForm.resetFields()
      // 重置form  因为this.$refs.deptForm.resetFields()方法不会重置id等其他数据
      this.form = {
        name: '', // 部门名字
        introduce: '', // 部门介绍
        manager: '', // 负责人名称
        code: '' // 部门编码，同级部门不可重复
      }
    },
    // onSubmit () { // 点击提交事件
    //   console.log(1)
    // }
    // 调用获取员工简单列表的API
    async getEmployeesSimple() {
      const data = await getEmployeesSimpleAPI()
      // console.log(data)
      this.manegerList = data
    },
    // 点击确定执行的回调
    addDept() {
      this.$refs.deptForm.validate(async(isOK) => {
        // 验证都通过后,发送新增部门请求
        if (isOK) {
          if (this.form.id) { // 如果form已经有id 说明是点击的编辑按钮
            await modifyDepartmentAPI(this.form)
          } else {
            // 这里的pid参数是从主组件点击弹出层得到的每一项的数据上获取的
            await addDepartmentAPI({ ...this.form, pid: this.currenData.id || '' })
          }
          // console.log(data)
          this.$message.success('添加成功')
          // 通过$emit调用父组件的方法(重新获取部门列表数据)
          this.$emit('update')

          this.closeDialog()
        } else {
          return false
        }
      })
    },
    // 点击重置的回调
    resetForm() {
      this.$refs.deptForm.resetFields()
      this.closeDialog()
    },
    // 调用根据id修改部门详情的API
    async editDepartment (id) {
      const res = await editDepartmentAPI(id)
      // console.log(res)
      this.form = res
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
